<template>
  <a-modal width="1200px" v-model:visible="selectPackageVisible" >
    <taocnTypeComponent width="1200px" @select="selectType"></taocnTypeComponent>
  </a-modal>

  <a-modal width="800px" v-model:visible="visible" @ok="handleOk" @cancel="handleCancel" >
    <template #title>
      {{ title }}
    </template>

    <a-form labelAlign="right" :model="packageDto" >
      <a-form-item label="套餐名称" name="packageName">
        <a-input v-model:="packageDto.packageName" placeholder="请输入套餐名称" />
      </a-form-item>
      <a-form-item label="套餐类型" name="packageTypeId">
       <a-input :disabled="true" v-model="packageDto.packageTypeName"/>
        <a-button @click="selectPackageVisible = true">查询</a-button>
      </a-form-item>
      <a-form-item label="套餐价格" name="packagePrice">
        <a-input v-model:="packageDto.packagePrice" placeholder="请输入套餐价格" />
      </a-form-item>
      <a-form-item label="套餐标签" name="packageLable">
        <a-input v-model:="packageDto.packageLable" placeholder="请输入套餐标签" />
      </a-form-item>
      <a-form-item label="套餐服务" name="packageService">
        <a-input v-model:="packageDto.packageService" placeholder="请输入套餐服务" />
      </a-form-item>
      <a-form-item label="套餐产品" name="packageGoods">
        <a-input v-model:="packageDto.packageGoods" placeholder="请输入套餐产品" />
      </a-form-item>
      <a-form-item label="套餐行程" name="packageTrip">
        <a-input v-model:="packageDto.packageTrip" placeholder="请输入套餐行程" />
      </a-form-item>
      <a-form-item label="套餐简介" name="packageDescription">
        <a-textarea v-model:="packageDto.packageDescription" placeholder="请输入套餐简介" />
      </a-form-item>
      <a-form-item label="汉服图片">
        <ImgUpload @imgs="selectImg" @del-img="delImg" :src="hanFuImg" ></ImgUpload>
      </a-form-item>
      <a-form-item label="套餐状态" name="status">
        <a-select v-model:="packageDto.status" placeholder="请选择套餐状态" allow-clear>
          <a-option :value="1">上架</a-option>
          <a-option :value="0">下架</a-option>
        </a-select>
      </a-form-item>


    </a-form>

  </a-modal>



</template>

<script setup lang="ts">
import type {Reactive, Ref} from "vue-demi";
import type {PackageDto} from "@/apis/taocan/taocan";
import {reactive, ref} from "vue";
import TaocnTypeComponent from "@/views/taocan/type/component/taocnTypeComponent.vue";
import type {img} from "@/components/ImgUpload/index.vue";
import {addPackage, updatePackage, updatePackageImg} from "@/apis/taocan/taocan";
import {Notification} from "@arco-design/web-vue";

const selectPackageVisible = ref(false)

const title : Ref<String> = defineModel('title',{
  default: '',
  type: String
})

const api:Ref<String> = defineModel('api',{
  default: '',
  type: String
})

const src:Ref<string[]> = defineModel("src",{
  type:String
  ,default:[]
})


/**
 * 套餐图片列表
 */
const hanFuImg:Ref<img[]> = defineModel("img", {
  type:Array<img>,
  default:[]
})

/**
 * 选择图片
 */
const selectImg = (data:Ref<img[]>) => {
  hanFuImg.value = data.value
}

/**
 * 删除图片
 */
const delImg = (data:Ref<img[]>) => {
  hanFuImg.value = data.value
}


/**
 * 汉服窗口显示
 */
const visible:Ref<Boolean> = defineModel('visible',{
  default: false,
  type: Boolean
})

/**
 * 套餐 Dto 类
 * */
const packageDto:Ref<PackageDto> = defineModel('dto',{
  type: Object,
  default: {
      id: 0,
      ossIds: '',
      packageTypeId: 0,
      packageTypeName: '',
      packageName: '',
      packagePrice: 0,
      packageLable: '',
      packageService: '',
      packageGoods: '',
      packageTrip: '',
      packageDescription: '',
      updateBy: '',
      updateTime: '',
      status: null,
    }
})

/**
 * 清空Dto数据
 * */

const clearHanFuFormData = () => {
  hanFuImg.value = []
}


/**
 * 表单确定按钮
 * */
const handleOk = async () => {
  visible.value = false

  /**
   * 规范表单结构
   * */

  if (packageDto.value.packageTypeId == null || packageDto.value.packageTypeId == 0 ){
    Notification.warning({
      title: "套餐类型不能为空",
      content: "",
      duration: 2000
    })
    return
  }



  if (api.value === 'add') {

    /**
     * 进入新增方法
     * */
   await new Promise(resolve => {
      newPackage().then(res => {
          Notification.success({
            title: '成功',
            content: 'success!',
            duration: 3000,
          })
        resolve(res)
      })
     clearHanFuFormData()
   })
    emit("ok")



  }

  if (api.value === 'up') {

  await new Promise(resolve => {
     update().then(res => {
       Notification.success({
         title: '成功',
         content: 'success!',
         duration: 3000,
       })
       resolve(res)
     })
    clearHanFuFormData()
   })
    emit("ok")

  }


}


/**
 * 表单取消按钮
 * */
const handleCancel = () => {
  visible.value = false
  hanFuImg.value = []
}


const selectType = (data:any) => {
  packageDto.value.packageTypeName = data.packageTypeName
  packageDto.value.packageTypeId = data.id
  selectPackageVisible.value = !selectPackageVisible.value

}



/**
 * 新增数据方法
 * */

const newPackage = async () => {

  let formData = new FormData();

  formData.append("TypeId", packageDto.value.packageTypeId + "");
  formData.append("name", packageDto.value.packageName + "");
  formData.append("price", packageDto.value.packagePrice + "");
  formData.append("lable", packageDto.value.packageLable + "");
  formData.append("service", packageDto.value.packageService + "");
  formData.append("goods", packageDto.value.packageGoods + "");
  formData.append("trip", packageDto.value.packageTrip + "");
  formData.append("description", packageDto.value.packageDescription + "");
  formData.append("status", packageDto.value.status + "");
  formData.append("updateBy", 1 + "");

  for (let i = 0; i < hanFuImg.value.length;i++) {
    formData.append("img", hanFuImg.value[i].file, hanFuImg.value[i].fileName)
  }

  if (hanFuImg.value.length == 0){

    //没有套装图片
    formData.append("img",new Blob,"undefined")

  }


  return await addPackage(formData).then(res => {
    return res.msg === "ok";
  })


}


/**
 * 修改数据方法
 * */
const update = async () => {
  let imgData = new FormData();

  for (let i = 0; i < hanFuImg.value.length;i++) {

    if (hanFuImg.value[i].file != null){
      imgData.append("img", hanFuImg.value[i].file, hanFuImg.value[i].fileName)
    }

  }

  imgData.append("id", packageDto.value.id + "")
  imgData.append("ossIds", packageDto.value.ossIds + "")
  imgData.append("user", 1 + "")


    updatePackage(packageDto.value).then(res => {

      if (imgData.get("img") != null) {

        updatePackageImg(imgData).then(res => {
          emit('ok')

        })

      }
    })
}


const emit = defineEmits(["ok"])
</script>

<style lang="scss" scoped>

</style>